<template>
  <div @touchstart="putup">
    <div id="map"></div>
  </div>
</template>
<script>
  import BMap from 'BMap'
  import qs from 'qs'
  export default {
    methods: {
      putup () {
        $('#map').on('touch', $('.BMap_mask'), function () {
          console.log(111)
          $('#getcar,.getcar,#rebackpark,.rebackpark').animate({'height': '7.2rem'}, 300)
          $('.carlist,.parklist').css({'overflow-y': 'hidden'})
          $('.rebackbg').show()
        })
      },
      mapready () {
        var mp = new BMap.Map('map')
//        var point = new BMap.Point(116.3964, 39.9093)
//        mp.centerAndZoom(point, 14)
//      mp.addControl(new BMap.MapTypeControl())
        mp.enableScrollWheelZoom(true)
        mp.enableDoubleClickZoom(true)
//        定位
//        var geolocation = new BMap.Geolocation()
//        geolocation.getCurrentPosition(function (r) {
//          if(this.getStatus() == BMAP_STATUS_SUCCESS) {
//            var mk = new BMap.Marker(r.point);
//            mp.addOverlay(mk);
//            mp.panTo(r.point);
//            console.log(r)
//          }
//          else {
//            console.log('failed' + this.getStatus())
//          }
//        },{enableHighAccuracy: true})
        // 复杂的自定义覆盖物
        function ComplexCustomOverlay (point, text, parkingId, spantext) {
          this._point = point
          this._text = text
          this._spantext = spantext
          this._parkingId = parkingId
        }
        ComplexCustomOverlay.prototype = new BMap.Overlay()
        ComplexCustomOverlay.prototype.initialize = function (map) {
          this._map = map;
          var div = this._div = document.createElement("div")
          div.style.width = "30px"
          div.style.height = "30px"
          div.style.fontSize = "14px"
          div.style.lineHeight = "30px"
          div.className = "mappoint"
          div.setAttribute('data-parkingId', this._parkingId)
          div.innerHTML = this._text
          var span = this._span = document.createElement("span");
          span.className = "mapspan"
          span.style.width = "60px"
          span.style.height = "20px"
          span.style.fontSize = "12px"
          span.style.lineHeight = "20px"
          span.innerHTML = this._spantext
          div.appendChild(span)
          mp.getPanes().labelPane.appendChild(div)
          return div
        }
        ComplexCustomOverlay.prototype.draw = function () {
          var map = this._map;
          var pixel = map.pointToOverlayPixel(this._point);
          this._div.style.left = pixel.x - 30 + "px";
          this._div.style.top  = pixel.y - 30 + "px";
        }
//        地图停车场
        var _this = this
        this.axios.post('car/parkingNewListV2.json', qs.stringify({
          positionLon: this.global.positionLon,
          positionLat: this.global.positionLat,
          userPickCityCode: this.global.userPickCityCode
        }))
          .then(function (res) {
            var parkingdata = res.data.modelData.parkingMapVoList[2].parkingList
            console.log(parkingdata)
            console.log(_this.global.parkingid)
            mp.centerAndZoom(new BMap.Point(parkingdata[0].parkingLon, parkingdata[0].parkingLat), 14)
            for (let i = 0; i < parkingdata.length; i++) {
              mp.addOverlay(new ComplexCustomOverlay(new BMap.Point(parkingdata[i].parkingLon, parkingdata[i].parkingLat), parkingdata[i].carCount, parkingdata[i].parkingId, parkingdata[i].distanceDesc))
            }
//            坐标点击事件
            $('.mappoint').on('touchstart', function () {
              console.log($(this).attr('data-parkingId'))
              $('.mappoint').removeClass('active')
              $(this).addClass('active')
            })
          })

        mp.addEventListener("touchstart", function () {
          $('#getcar,.getcar,#rebackpark,.rebackpark').animate({'height': '7.2rem'}, 300)
          $('.carlist,.parklist').css({'overflow-y': 'hidden'})
          $('.rebackbg').show()
        })
      }
    },
    mounted () {
      this.mapready()
//      this.showcars()
    }
  }
</script>
<style lang="scss">
  #map{
    width:100%;
    height:666px;
    .mappoint{
      position: absolute;
      z-index: 24;
      text-align: center;
      background: url("../../static/image/img_dot_bg.png");
      -webkit-background-size: cover;
      background-size: cover;
      color: #fff;
      font-weight:bold;
    }
    .mapspan{
      background: #000;
      position: absolute;
      left:-50%;
      top:-80%;
      color: #fff;
      text-align: center;
      -webkit-border-radius: 20px;
      -moz-border-radius: 20px;
      border-radius: 20px;
      display: none;
    }
    .mappoint.active{
      -webkit-transform: scale(1.2);
      -moz-transform: scale(1.2);
      -ms-transform: scale(1.2);
      -o-transform: scale(1.2);
      transform: scale(1.2);
      .mapspan{
        display: block;
      }
    }
  }
</style>
